<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        }

        body {
            padding-bottom: 40px;
            background-color: #fff;
        }

        .form-signin {
            width: 100%;
            max-width: 640px;
    margin: auto;
    padding: 15px;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .filedlabel {
            width: 90px !important;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .sr-only2 {
            margin-top: 15px;
        }

    
        .logodiv img {
            width: 240px;
            margin: 0 auto;
            display: block;
        }

        .logodiv {
            text-align: center;
        }

        .logodiv h1 {
            font-size: 1.4rem;
            color: #03357a;
            margin-top: 20px;
            margin-bottom: 50px;
        }

        .logodiv h2 {
            font-size: 1.5rem;
            margin-bottom: 80px;
        }



        .fgtpaws {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
    <div class="form-signin form-group1">

        <div class="logodiv">
            <img class="bannerlogo" src="../image/logo.jpeg">
        </div>


        <div class="d-flex bd-highlight align-items-center mt-5">
            <div class="p-2 flex-grow-1 bd-highlight">
                <input type="text" id="api" style="font-size: 12px;" v-model="customapi" class="form-control form-control-theme" :placeholder="lan['Please_enter_server']" >
            </div>
        </div>


        <div class="d-flex bd-highlight align-items-center mt-5">
            <div class="p-2 flex-grow-1 bd-highlight">
                <input type="text" id="wmsapi" style="font-size: 12px;" v-model="wmsapi" class="form-control form-control-theme" :placeholder="lan['Please_enter_Wms_server']" >
            </div>
        </div>

        <div class="d-flex bd-highlight align-items-center mt-5">
            <div class="p-2 flex-grow-1 bd-highlight">
                <select id="post-content" v-model="checkkey" class="form-select form-control-theme form-control" >
                    <option value="en-hk">English</option>
                    <option value="zh-hk">繁体中文</option>
                    <option value="zh-cn">简体中文</option>
                </select>
            </div>
        </div>
        
        <div class="d-flex bd-highlight align-items-center mt-5">
            <div class="p-2 flex-grow-1 bd-highlight">
                <select v-model="dayin" class="form-select form-control-theme form-control" >
                    <option value="arco">Printer:TOSHIBA</option>
                </select>
            </div>
        </div>

        <div class="d-flex bd-highlight align-items-center mt-5">
            <div class="p-2 bd-highligh flex-grow-1 filedlabel">{{lan['Warehouse_QR_code']}}</div>
            <div class="p-2 flex-grow-1 bd-highlight">
                <select v-model="qrcode" class="form-select form-control-theme form-control" >
                    <option value="#">#</option>
                    <option value="-">-</option>
                </select>
            </div>
        </div>

        <div class="d-flex bd-highlight align-items-center mt-5">
            <div class="p-2 bd-highligh flex-grow-1 filedlabel">{{lan['Batch_FIFO_Prompt']}}</div>
            <div class="p-2 flex-grow-1 bd-highlight">
                <select v-model="batch" class="form-select form-control-theme form-control" >
                    <option value="0">{{lan['Need']}}</option>
                    <option value="1">{{lan['No_Need']}}</option>
                </select>
            </div>
        </div>
       
        <div class="d-flex bd-highlight align-items-center mt-5">
            <div class="p-2 bd-highligh flex-grow-1 filedlabel">{{lan['PRSOQC']}}</div>
            <div class="p-2 flex-grow-1 bd-highlight">
                <select id="post-content" v-model="PoQty" class="form-select form-control-theme form-control" >
                    <option value="1">{{lan['Warn']}}</option>
                    <option value="2">{{lan['Stop']}}</option>
                    <option value="3">{{lan['None']}}</option>
                </select>
            </div>
        </div>

        <div class="d-flex bd-highlight align-items-center mt-5">
            <div class="p-2 bd-highligh flex-grow-1 filedlabel">{{lan['FAI']}}</div>
            <div class="p-2 flex-grow-1 bd-highlight">
                <select id="post-content" v-model="faiIns" class="form-select form-control-theme form-control" >
                    <option value="1">{{lan['YES']}}</option>
                    <option value="2">{{lan['NO']}}</option>
                </select>
            </div>
        </div>

        <div class="form-group row action-row">
            <div class="col-4 offset-1">
                <button type="button" tapmode="" onclick="user_login();" class="btn btn-primary btn-action">{{lan['OK']}}</button>
            </div>
            <div class="col-4 offset-2 mb-5">
                <button type="button" tapmode="" onclick="closeWin();" class="btn btn-primary btn-action">{{lan['Cancel']}}</button>
            </div>
        </div>

    </div>

    <div class="copyright mt-5 w-100">
        <div class="row" :gutter="10">
            <div  class="col-5" style="text-align: right;">{{lan['Version']}}：</div>
            <div  class="col-7">{{appversion}}</div>
            <div  class="col-5"  style="text-align: right;">{{lan['Site']}}：</div>
            <div  class="col-7">{{SiteName}}</div>
            <div  class="col-5"  style="text-align: right;">{{lan['Company']}}：</div>
            <div  class="col-7">{{CompanyName}}</div>
        </div>
    </div>
</div>
</body>
<script id="post-template" type="text/html">
    <option>請選擇公司</option>
    {{ for(var i=0,len=it.length; i < len; i++) { }}
  
           <option value="{{= it[i].Company1 }}">{{= it[i].Name }}</option>
	{{ } }}
</script>
<script type="text/javascript" src="../script/lang.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript" src="../script/base64.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        back_listen();
        //getlan();
        app.customapi = getapi();
        userinfo = get_user_info();
        app.appversion=api.appVersion;
        app.SiteName=userinfo.SiteName;
        app.CompanyName=userinfo.CompanyName;
        app.wmsapi = wmsserver;
        var checkkey = localStorage.getItem('lkey');
        app.checkkey = checkkey?checkkey:'en-hk';
    }
    const app = new Vue({
        el: '#app',
        data: {
            checkkey: 'en-hk',
            customapi:'',
            appversion:"",
            SiteName:"",
            CompanyName:"",
            wmsapi:'',
            dayin:modeldayin,
            faiIns:localStorage.getItem('faiIns') || 2,
            PoQty:localStorage.getItem('PoQty') || 3,
            qrcode:localStorage.getItem('qrcode') || '#',
            batch:localStorage.getItem('batch') || 1,

        },
        mounted() {
            
        },
        methods: {

        }
    });


   

    function user_login() {

        var customapi1 = $("#api").val();
        var customapi2 = $("#wmsapi").val();
        
        if (customapi1 == '') {
            api.toast({
                msg: lan['server_check'],
                location: 'middle'
            });
            return false;
        }

        if (customapi2 == '') {
            api.toast({
                msg: lan['Please_enter_Wms_server'],
                location: 'middle'
            });
            return false;
        }
        localStorage.setItem("wmsapi", app.wmsapi);
        localStorage.setItem("customapi", app.customapi);
        api.setPrefs({
                    key: 'api',
                    value: customapi1
        });
        localStorage.setItem("dayin", app.dayin);
        localStorage.setItem("lkey", app.checkkey);
        localStorage.setItem('qrcode',app.qrcode);
        localStorage.setItem('batch',app.batch);
        localStorage.setItem('faiIns',app.faiIns);
        localStorage.setItem('PoQty',app.PoQty);
        


        api.alert({
                    title: 'Tips',
                    msg: lan['server_changed']
                }, function (ret, err) {
                    var index = ret.buttonIndex;
                    //api.closeWin({});
                    api.rebootApp();
                });
        

        

    }
</script>

</html>